<!doctype html>
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>loadmore-iscroll测试</title>
	<link rel="stylesheet" href="iscroll/iscroll.css">
	
	<!--仅使用了图标字体，无其他作用-->
	<link rel="stylesheet" href="css/font-awesome.css">
	
	<link rel="stylesheet" href="css/demo.css">

    
</head>
<body>
<div class="header">
    <h1>就当我是新闻页吧</h1>
</div>
<div class="content">

	<div id = "scroller-pullDown">
		<span id = "down-icon" class = "icon-double-angle-down pull-down-icon"></span>
		<span id = "pullDown-msg" class = "pull-down-msg">下拉刷新</span>
	</div>
		
    <div class="lists"></div>
	
	<div id = "scroller-pullUp">
		<span id = "up-icon" class = "icon-double-angle-up pull-up-icon"></span>
		<span id = "pullUp-msg" class = "pull-up-msg">上拉刷新</span>
	</div>

	
</div>
<script src="js/zepto.min.js"></script>
<script src="iscroll/iscroll.js"></script>
<script>
$(function(){

	/*初始化*/
	var counter = 0; /*计数器*/
	var pageStart = 0; /*offset*/
	var pageSize = 4; /*size*/
	var isEnd = false;
	
	/*首次加载*/
	getData(pageStart, pageSize);

    
	
	function getData(offset,size){
		if(isEnd) return;
		$.ajax({
			type: 'GET',
			url: 'json/more.json',
			dataType: 'json',
			success: function(reponse){

				var data = reponse.lists;
				var sum = reponse.lists.length;

				var result = '';
				
				/************业务逻辑块：实现拼接html内容并append到页面*****************/
				
				//console.log(offset , size, sum);
				
				/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
				* 例如分页数是5，只剩2条，则只取2条
				*
				* 实际MySQL查询时不写这个不会有问题
				*/
				if(sum - offset < size ){
					size = sum - offset;
				}
				
				/*使用for循环模拟SQL里的limit(offset,size)*/
				for(var i=offset; i< (offset+size); i++){
					result +=   '<a class="item opacity" href="'+data[i].link+'">'
									+'<img src="'+data[i].pic+'" alt="">'
									+'<h3>'+data[i].title+'</h3>'
									+'<span class="date">'+data[i].date+'</span>'
								+'</a>';
				}

				$('.lists').append(result);
				
				/*******************************************/
	
				/*隐藏more*/
				if ( (offset + size) >= sum){
					isEnd = true;
				}
			},
			error: function(xhr, type){
				alert('Ajax error!');
			}
		});
	}
	
		var myScroll,
		upIcon = $("#up-icon"),
		downIcon = $("#down-icon");

		myScroll = new IScroll('.content', { probeType: 3, mouseWheel: true });
		
		myScroll.on("scroll",function(){
			var y = this.y,
				maxY = this.maxScrollY - y,
				downHasClass = downIcon.hasClass("reverse_icon"),
				upHasClass = upIcon.hasClass("reverse_icon");
			
			if(y >= 40){
				!downHasClass && downIcon.addClass("reverse_icon");
				return "";
			}else if(y < 40 && y > 0){
				downHasClass && downIcon.removeClass("reverse_icon");
				return "";
			}
			
			if(maxY >= 40){
				!upHasClass && upIcon.addClass("reverse_icon");
				return "";
			}else if(maxY < 40 && maxY >=0){
				upHasClass && upIcon.removeClass("reverse_icon");
				return "";
			}
		});
		
		myScroll.on("slideDown",function(){
			if(this.y > 40){
				alert("slideDown");
				upIcon.removeClass("reverse_icon")
			}
		});
		
		myScroll.on("slideUp",function(){
			if(this.maxScrollY - this.y > 40){
			
				counter ++;
				pageStart = counter * pageSize;
				
				getData(pageStart, pageSize);
				//alert("slideUp");
				upIcon.removeClass("reverse_icon")
			}
		});

		
		

});
</script>
<script src="js/tj.js"></script>
</body>
</html>